<template>
  <div class="container">
    <div id="bookCon">
      <div id="flipbook">
        <div v-for="(item) in imgUrl" :key="item.index">
          <div class="pageBg">
            <img class="image-view" :src="item.imgurl">
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import turn from '../utils/turn.js'
import image1 from "../assets/0001.jpg"
import flipsound from "../assets/flipsound.mp3"

export default {
  name: "pager",
  data() {
    return {
      imgUrl: [
        {imgurl: image1, index: 1},
        {imgurl: 'https://epaper.sgcctop.com/pic/202302/03/8635dcf5-5267-4dc3-bc33-acfe9565015e.jpg.2', index: 2},
        {imgurl: 'https://epaper.sgcctop.com/pic/202302/03/1bd2dd6a-2509-469c-a7ec-8d61b3044a67.jpg.2', index: 3},
        {imgurl: 'https://epaper.sgcctop.com/pic/202302/03/e9049541-b276-4dac-bca4-728997e0a2fa.jpg.2', index: 4},
        {imgurl: 'https://epaper.sgcctop.com/pic/202302/03/1d632c31-7f8d-4c17-9b96-aeff9a272eb4.jpg.2', index: 5},
        {imgurl: 'https://epaper.sgcctop.com/pic/202302/03/45d5be64-5461-4026-acf7-ba681d0a7f9e.jpg.2', index: 6},
        {imgurl: 'https://epaper.sgcctop.com/pic/202302/03/d015798e-3e12-44c5-9261-f442e5e0066a.jpg.2', index: 7},
        {imgurl: 'https://epaper.sgcctop.com/pic/202302/03/4552e2f3-9817-4e13-ab0e-f52a760aa03c.jpg.2', index: 8},
        {imgurl: 'https://epaper.sgcctop.com/pic/202302/03/04514d87-028f-4191-b25f-13c63788708b.jpg.2', index: 9},
      ]
    }
  },
  mounted() {
    this.onTurn();
  },
  methods: {
    onTurn() {
      let bgAudio = new Audio;
      bgAudio.src = flipsound
      let width = $(window).width(), height = $(window).height();
      let bookWidth = width, bookHeight = height
      if (width > height) width = 365, height = 667
      // this.setBookConStyle(width, height)
      this.$nextTick(() => {
        $("#flipbook").turn({
          height: height - 37 * 2,
          width: width,
          elevation: 50,
          display: "single",
          gradients: true,
          autoCenter: true,
          when: {
            turning: function (M, O, N) {
              bgAudio.play()
            }, turned: function (M, P, O) {

            }, missing: function (N, O) {

            }
          }
        });
      })
    },
    setBookConStyle() {
      let top = 0, left = 0
      $('#bookCon').css('inset', `${top}px ${left}px`)
    }
  },
}
</script>

<style>
body {
  margin: 0px;
}

.container {
  width: 100%;
  height: 100vh;
  background-size: 100% 100%;
  background-image: url('../assets/pager_bg.jpg');
}

#bookCon {
  position: absolute;
  inset: 37px 0px;
}

#flipbook {
  overflow: hidden;
  width: 100%;
  height: 100vh;
}

#flipbook .pageBg {
  background-size: cover;
  width: 100%;
  height: 100%;
  position: absolute;
  background-color: #FFF;
}

.image-view {
  width: 100%;
  height: 100%;
}
</style>
